<template>
  <div class="main">
    <div class="main-title">
      <img src="/chuneng/img/title-border.png" />
      <!-- <div style="text-align: center">
        <svg viewBoxs="0 0 500 300">
          <defs>
            <linearGradient
              id="SVGID_1_"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="0"
              y2="90"
            >
              <stop offset="0" style="stop-color: #ffffff" />
              <stop offset="0.9" style="stop-color: #6bdbfa" />
              <stop offset="1" style="stop-color: #6bdbfa" />
            </linearGradient>
          </defs>
          <text
            style="fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder"
            text-anchor="middle"
            x="50%"
            y="50%"
          >
            功能选择界面
          </text>
        </svg>
      </div> -->
      <!-- 引入封装的cnsvg组件 -->
      <cn-svg :viewbox="'0 0 500 300'" :svgstyle="'width: 600px;'" :textname="'分布式储能在线监测模块'"></cn-svg>
    </div>
    <div class="main-btn" style="margin-left: 80px">
      <div v-for="item in btns" :key="item.name">
        <div class="btn menu-btn" @click="goto(item.path)">
          <!-- <svg style="height: 60px; width: 270px" viewBoxs="0 0 100 100">
            <defs>
              <linearGradient
                id="SVGID_1_"
                gradientUnits="userSpaceOnUse"
                x1="0"
                y1="0"
                x2="0"
                y2="90"
              >
                <stop offset="0" style="stop-color: #ffffff" />
                <stop offset="0.9" style="stop-color: #6bdbfa" />
                <stop offset="1" style="stop-color: #6bdbfa" />
              </linearGradient>
            </defs>
            <text
              style="fill: url(#SVGID_1_); font-size: 26px; font-weight: bolder"
              text-anchor="middle"
              x="50%"
              y="50%"
            >
              {{ item.name }}
            </text>
          </svg> -->
          <!-- 引入封装的cnsvg组件 -->
          <cn-svg :viewbox="'0 0 100 100'" :svgstyle="'height: 100px; width: 400px;'" v-bind:textname="item.name"></cn-svg>
        </div>
      </div>
    </div>
    <cells
      style="
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
      "
      :invalid="[1,9]"
    />
  </div>
</template>

<script>
import Cells from "./Cells.vue";
import cnSvg from "./cn-svg.vue";
export default {
  components: { Cells, cnSvg },
  name: "Index",
  data() {
    return {
      btns: [
        {
          name: "在线监测数据",
          path: "/zxjc",
        },
        {
          name: "单体电池运行状态估计",
          path: "/dtdc",
        },
        {
          name: "电池串运行状态估计",
          path: "/dcc",
        },
        {
          name: "PCS运行状态估计",
          path: "/pcs",
        },
        {
          name: "电池在线故障预警",
          path: "/zxgz",
        },
      ],
    };
  },
  methods:{
    goto(p) {
      this.$router.push({path: p})
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
